﻿<%@ Page Title="JQuery.Net Control Demo Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="AutoCompleteDemo.aspx.cs" Inherits="TestFrame.AutoCompleteDemo" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
    #project-icon       { width: 16px; height: 16px; }
    .demo               { display: inline-block; width: 174px; }
    input[type="text"]  { padding: 1px; }
    img                 { padding: 1px; }
    td                  { vertical-align: top; text-align: center; }
    label               { font-size: 7pt; white-space: nowrap; }
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <table>
        <tr>
            <th>Cached Demo</th>
            <th>Custom Data and Render Template</th>
        </tr>
        <tr>
            <td><JQN:AutoComplete ID="acCachedDemo" runat="server" Length="2" Width="150px" /></td>
            <td>
                <div class="demo" style="white-space: nowrap; display: block; width: 100%; line-height: 20px; text-align: left;">
	                <img id="project-icon" alt="" src="Styles/images/transparent_1x1.png"  class="ui-state-default" style="vertical-align: middle;" />
                    <JQN:AutoComplete ID="acCustomTemplate" runat="server" TemplateID="template" Width="150px" Style="vertical-align: middle;">
                        <Templates>
                            <JQN:Script ID="template" Type="html">
                                <li><a>{%= label %}<br /><span style="font-size: 8pt; white-space: nowrap;">{%= desc %}</span></a></li>
                            </JQN:Script>
                        </Templates>
                        <ScriptEvents>
                            <JQN:Script Event="focus" Type="javascript">
                                function (e, ui) {
                                    $(e.target).val(ui.item.label);
                                    return false;
                                }
                            </JQN:Script>
                            <JQN:Script Event="select" Type="javascript">
                                function (e, ui) {
                                    $(e.target).val(ui.item.label);
                                    $('#project-description').html(ui.item.desc);
                                    $('#project-icon').attr('src', ui.item.icon);
                                    return false;
                                }
                            </JQN:Script>
                        </ScriptEvents>
                    </JQN:AutoComplete><br />
                    <input type="hidden" id="project-id"/>
	                <label id="project-description"></label>
                </div>
            </td>
        </tr>
        <tr>
            <th colspan="2">AnyTime Date Time Picker with close event</th>
        </tr>
        <tr>
            <td>
                <JQN:AnyTime ID="dtAnyTime" runat="server" Clock="Standard" Picker="Both">
                <ScriptEvents>
                    <JQN:Script Event="close" Type="javascript">
                        function() {
                            alert(this.val() + ' was the time selected!');
                        }
                    </JQN:Script>
                </ScriptEvents>
                </JQN:AnyTime>
            </td>
            <td>&nbsp;</td>
        </tr>
    </table>
</asp:Content>